<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online_judge</title>
</head>
<body>
    <h1> Test Online judge</h1>
    <p><a href="http://192.168.18.12:8880/all_questions"> 题库</a> </p>
</body>
</html> -->



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Judge</title>
    <link rel="icon" href="../static/img/favicon.ico" />

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="../static/layui/jquery-3.7.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../static/layui/layui.js"></script>

    <link href="../static/layui/css/layui.css" rel="stylesheet">

    <script src="../static/assets/js/color-modes.js"></script>
    <link href="../static/assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="//unpkg.com/layui@2.9.10/dist/css/layui.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="../static/css/style.css"> -->
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
        }

        /* header {
        background-color: #333;
        color: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 20px;
    }
    
    header h1 {
        margin: 0;
        flex-grow: 1;
    } */

        /* nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: row;
        }

        nav li {
            margin-right: 20px;
        }

        nav a {
            color: #fff;
            text-decoration: none;
        }

        main {
            max-width: 1200px;
            margin: 0 auto;
        } */

        .hero {
            background-image: url(bg.jpg);
            background-size: cover;
            background-position: center center;
            color: #fff;
            padding: 50px 20px;
            text-align: center;
            animation:showDivAni 3s 1;
        }

        .features {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-top: 50px;
        }

        .features li {
            width: calc(100% / 3);
            padding: 20px;
            box-sizing: border-box;
        }

        .features h3 {
            margin-top: 20px;
        }

        .features p {
            margin-top: 10px;
            font-size: 16px;
            line-height: 1.5;
        }

        .cta {
            background-color: #f2f2f2;
            padding: 100px 20px;
            text-align: center;
        }

        .cta h2 {
            margin-bottom: 50px;
        }

        .btn1 {
            display: inline-block;
            padding: 10px 20px;
            border-radius: 5px;
            background-color: #4f4f4f;
            color: #f99d2e;
            text-decoration: none;
            margin-right: 10px;
        }

        .btn2 {
            /* Login */
            display: inline-block;
            background-color: #333;
            color: #fff;
            text-decoration: none;
        }

        .btnt {
            display: inline-block;

            font-size: 20px;
            padding: 15px 33px;

            margin-top: 20px;

            letter-spacing: 2px;
            transition: .2s;
        }

        .btnt:hover {
            background-color: #ffffff;
            transform: scale(.9);
            backdrop-filter: blur(5px);
        }

        /*实现文字颜色从红到黄的线性渐变效果*/
        .gradient-text {
            background: linear-gradient(to right, #ff0101, #e1ff00);
            /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
            -webkit-background-clip: text;
            /*将设置的背景颜色限制在文字中*/
            -webkit-text-fill-color: transparent;
            /*给文字设置成透明*/
            animation:showDivAni 3s 1;
        }

        .gradient-text1 {
            background: linear-gradient(to right, #475fff, rgb(0, 255, 128));
            /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
            -webkit-background-clip: text;
            /*将设置的背景颜色限制在文字中*/
            -webkit-text-fill-color: transparent;
            /*给文字设置成透明*/
            animation:showDivAni 3s 1;
        }

        .gradient-text2 {
            background: linear-gradient(to right, #475fff, rgb(255, 0, 0));
            /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
            -webkit-background-clip: text;
            /*将设置的背景颜色限制在文字中*/
            -webkit-text-fill-color: transparent;
            /*给文字设置成透明*/
            animation:showDivAni 3s 1;
        }

        .section-hero {

            background: url(../static/img/test.jpg) no-repeat;
            background-size: 100%;
            height: 900px;

        }

        .section-hero2 {

            background: url(../static/img/test4.jpg) no-repeat;
            background-size: 100%;
            height: 900px;

        }



        .grad2 {
            /* header 渐变 */
            height: 6px;
            text-align: center;
            justify-content: center;
            /* 不支持线性的时候显示 */

        }

        .header_background2 {

            background-color: rgb(0, 0, 0);

        }

        .header_background {
            background: url(../static/img/test5.jpg) no-repeat;
            background-size: 100%;
            height: 900px;

            /*  background-image: linear-gradient(to bottom right, rgb(0, 98, 155), rgb(1, 171, 106)); */

        }

        .div_background {

            border-radius: 70px / 90px;
            background: rgba(255, 255, 255, 0.8);
            
            animation:showDivAni 3.5s 1;

            /*  background-image: linear-gradient(to bottom right, rgb(0, 98, 155), rgb(1, 171, 106)); */

        }

        /*  background-image: linear-gradient(to bottom right, rgb(0, 98, 155), rgb(1, 171, 106)); */

        /*  */

        @keyframes showDivAni {
            
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }

        }
    </style>


</head>

<body>
    <script src="//unpkg.com/layui@2.9.10/dist/layui.js"></script>
    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
        <symbol id="bootstrap" viewBox="0 0 118 94">
            <path fill-rule="evenodd" clip-rule="evenodd"
                d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z">
            </path>
        </symbol>
        <symbol id="home" viewBox="0 0 16 16">
            <path
                d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z" />
        </symbol>
        <symbol id="speedometer2" viewBox="0 0 16 16">
            <path
                d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z" />
            <path fill-rule="evenodd"
                d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z" />
        </symbol>
        <symbol id="table" viewBox="0 0 16 16">
            <path
                d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z" />
        </symbol>
        <symbol id="people-circle" viewBox="0 0 16 16">
            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
            <path fill-rule="evenodd"
                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
        </symbol>
        <symbol id="grid" viewBox="0 0 16 16">
            <path
                d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z" />
        </symbol>
    </svg>


    <!-- 导航栏 -->
    <header class="p-3 text-bg-dark">

        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
            <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
                    <use xlink:href="#bootstrap" />
                </svg>
            </a>

            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
                <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
                <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
                <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
                <li><a href="#" class="nav-link px-2 text-white">About</a></li>
            </ul>

            <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
                <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
            </form>
            <div class="dropdown text-end">
                <a href="#" class="d-block link-body-emphasis text-decoration-none dropdown-toggle"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
                </a>
                <ul class="dropdown-menu text-small">
                    <li><a class="dropdown-item" href="#">New project...</a></li>
                    <li><a class="dropdown-item" href="#">Settings</a></li>
                    <li><a class="dropdown-item" href="#">Profile</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">Sign out</a></li>
                </ul>
            </div>
            <div style="width:10px;"></div>
            <div class="text-end">
                <button type="button" class=" btn btn-primary me-2 ">Login</button>
                <button type="button" class="btn btn-warning">Sign-up</button>
            </div>

        </div>
    </header>


    <div>
        <main>
            <section class="cta header_background">
                <h1>
                    <p style="color: #1e9fff" class="gradient-text"><a
                            href="http://192.168.5.12:8880/all_questions">Efficient and minimalist algorithm practice
                            platform </a></p>
                </h1>
                <br><br><br>
                <h2>
                    <p class="gradient-text">加入我们，进入算法的世界！ </p>

                </h2>


                <div class="col-lg-6 col-xxl-4 my-5 mx-auto">
                    <div class="d-grid gap-2">
                        <button class="btn btnt " type="button">
                            <a href="http://192.168.5.12:8880/all_questions">
                                <p class="gradient-text"><b>进入题库</b></p>
                            </a>
                        </button>
                    </div>
                </div>


                <!--  <p style="color: #1e9fff" class="gradient-text"><a
                        >加入我们，进入算法的世界！</a></p> -->
                <div style="padding: 30px;">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md6">
                            <div class="layui-card div_background ">
                                <div class="layui-card-header ">
                                    <div class="grad2"></div>
                                    <h4 class="gradient-text1">全面的题库<h4>
                                </div>
                                <div class="layui-card-body gradient-text2">
                                    <b>我们提供了丰富的题目<br>
                                        包括算法、数据结构、编程语言等多个方向。</b>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card div_background">
                                <div class="layui-card-header">
                                    <div class="grad2"></div>

                                    <h4 class="gradient-text1">智能评测系统</h4>

                                </div>
                                <div class="layui-card-body gradient-text2">
                                    <b>我们的评测系统可以帮助你快速定位错误<br>
                                        并提供详细的错误信息和解决方案</b>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card div_background">
                                <div class="layui-card-header">
                                    <div class="grad2"></div>
                                    <h4 class="gradient-text1">全球排名</h4>
                                </div>
                                <div class=" layui-card-body gradient-text2">

                                    <b>我们提供了全球排名系统<br>
                                        可以让你和其他选手进行比拼，看看自己在全球范围内的编程水平</b>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card div_background">
                                <div class="layui-card-header">
                                    <div class="grad2"></div>
                                    <h4 class="gradient-text1">高效学习</h4>
                                </div>
                                <div class=" layui-card-body gradient-text2">
                                    <b>极简化的页面设计<br>
                                        全身心投入到算法中,高效便捷的AC方式</b>
                                </div>
                            </div>
                        </div>
                    </div>

                    <section class="hero">
                        <h2>助你前行的刷题网站</h2>
                        <p>我们的目标是帮助所有人提高编程能力，我们提供了一个全面的题库和丰富的学习资源，让你随时随地都能够进行学习和练习。</p>
                    </section>
            </section>




        </main>
    </div>

    <script src="../static/assets/dist/js/bootstrap.bundle.min.js"></script>
</body>



</html>